<template>
  <a-layout-content style="margin: 0 16px">
    <a-button type="primary" @click="goback()" style="margin-bottom:20px">返回</a-button>
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      <!-- 添加任务规则遮罩层 -->
      <div>
        <div class="mess-label">基础信息</div>
        <!-- item.taskType -->
        <div class="mess">
          <p>任务名称：</p>
          <span>{{ taskMess.taskTitle }}</span>
        </div>
        <div class="mess">
          <p>任务级别：</p>
          <span>{{ taskMess.taskObjectValue }}</span>
        </div>
        <div class="mess">
          <p>任务类型：</p>
          <span>{{ taskMess.taskTypeValue }}</span>
        </div>
        <div class="mess" v-if="taskMess.taskObject !== 3">
          <p>任务导购：</p>
          <span>{{ taskMess.taskDealer }}</span>
        </div>
        <div class="mess" v-if="taskMess.taskObject !== 3">
          <p>导购门店：</p>
          <span>{{ taskMess.taskStore }}</span>
        </div>
        <div class="mess">
          <p>任务状态：</p>
          <span>{{ taskMess.taskStatusValue }}</span>
        </div>
        <div class="mess">
          <p>开始时间：</p>
          <span>{{ taskMess.startDate }}</span>
        </div>
        <div class="mess" v-if="taskMess.execType !== 3">
          <p>发布时间：</p>
          <span>{{ taskMess.publishDate }}</span>
        </div>
        <div class="mess">
          <p>有效日期：</p>
          <span>{{ taskMess.startDate }} —— {{ taskMess.endDate ? taskMess.endDate : '待定' }}</span>
        </div>
        <div class="mess">
          <p>完成时间：</p>
          <span>{{ taskMess.taskOverDate }}</span>
        </div>
        <div v-if="aimVip" style="margin-bottom:10px">
          <span>目标会员：</span>
          <!--  优惠券-->
          <a-table
            v-if="this.taskTypeBox ===4"
            class="assignmentTable"
            bordered
            :data-source="dataSource"
            rowKey="id"
            :columns="columns1"
            :pagination="pagination"
            :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
          </a-table>
          <!--  消息模板-->
          <a-table
            v-if="this.taskTypeBox ===3"
            class="assignmentTable"
            bordered
            :data-source="dataSource"
            rowKey="id"
            :columns="columns2"
            :pagination="pagination"
            :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
          </a-table>
          <!--  公众号推文-->
          <a-table
            v-if="this.taskTypeBox ===5"
            class="assignmentTable"
            bordered
            :data-source="dataSource"
            rowKey="id"
            :columns="columns3"
            :pagination="pagination"
            :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
          </a-table>
          <!-- 导购会员表 -->
          <a-table
            v-if="this.taskTypeBox !==3 && this.taskTypeBox !==4 && this.taskTypeBox !== 5"
            class="assignmentTable"
            bordered
            :data-source="dataSource"
            rowKey="id"
            :columns="columns"
            :pagination="pagination"
            :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          >
          </a-table>
        </div>
        <div class="mess" v-if="taskMess.taskType === 6">
          <p>任务反馈：</p>
          <span>{{ taskMess.feedTypeValue }}</span>
        </div>
        <!-- 统一反馈 -->
        <div v-if="taskMess.feedbackType !== -1">
          <div class="mess">
            <p>
              反馈详情： <span>{{ taskMess.feedContent }}</span>
            </p>
          </div>
          <div class="feedImg">
            <img style="width:100px;height:100px;margin-right:10px" @click="bigImg(item)" v-for="(item, index) in taskMess.feedbackPict" :key="index" :src="item" />
          </div>
        </div>
      </div>

      <!-- 材料信息 -->
      <div v-if="taskMess.taskObject !== 3">
        <div class="mess-label">材料信息</div>
        <div class="mess">材料类型：{{ media.typeName }}</div>
        <div class="mess" v-if="media.mediaContent">材料内容：{{ media.mediaContent }}</div>
        <div class="mess" v-if="media.urlTitle">链接标题：{{ media.urlTitle }}</div>
        <div class="mess" v-if="media.url">材料链接：{{ media.url }}</div>
        <div class="mess" v-if="media.urlPic">
          <p>图片/视频：</p>
          <div class="feedImg" style="width:800px" v-if="media.typeName == '视频'">
            <video style="width:100px;height:100px;margin-right:10px" @click="bigVideo(item)" v-for="(item, index) in media.urlPic" :key="index" :src="item">
              <source :src="media.urlPic" type="video/mp4" />
              <source :src="media.urlPic" type="video/ogg" />
            </video>
          </div>
          <div class="feedImg" style="width:800px" v-else>
            <img style="width:100px;height:100px;margin-right:10px" @click="bigImg(item)" v-for="(item, index) in media.urlPic" :key="index" :src="item" />
          </div>
        </div>
      </div>
    </div>
  </a-layout-content>
</template>

<script>
import { getTaskMinute, getTaskCust, getVipFeedback, getAllocateMediaInfo, getTaskCustBox } from '@/api/task/taskrelese'

export default {
  components: {},
  data() {
    return {
      pagination: {
        //表格自带分页器的属性定义
        pageNo: 1,
        pageSize: 5, //默认每页显示10条数据
        total: 0,
        showTOtal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'], //自定义每页显示多少条数据
        showQuickJumper: true, //允许跳转至xx页
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange: (page, pageSize) => this.onPageChange(page, pageSize) //点击页码事件
      },
      aimVip: false,
      taskMess: [],
      dataSource: [],
      columns: [
        {
          title: '会员卡号',
          dataIndex: 'cardNo'
        },
        {
          title: '会员姓名',
          dataIndex: 'nickname'
        },
        {
          title: '完成状态',
          dataIndex: 'dealFlag'
        },
        {
          title: '完成时间',
          dataIndex: 'dealDate'
        }
      ],
      columns1: [
        {
          title: '优惠券ID',
          dataIndex: 'ticketId'
        },
        {
          title: '会员卡号',
          dataIndex: 'cardNo'
        },
        {
          title: '会员姓名',
          dataIndex: 'nickname'
        },
        {
          title: '完成状态',
          dataIndex: 'dealFlag'
        },
        {
          title: '完成时间',
          dataIndex: 'dealDate'
        }
      ],
      columns2: [
        {
          title: '消息模板ID',
          dataIndex: 'messageId'
        },
        {
          title: '会员卡号',
          dataIndex: 'cardNo'
        },
        {
          title: '会员姓名',
          dataIndex: 'nickname'
        },
        {
          title: '完成状态',
          dataIndex: 'dealFlag'
        },
        {
          title: '完成时间',
          dataIndex: 'dealDate'
        }
      ],
      columns3: [
        {
          title: '公众号推文ID',
          dataIndex: 'articleId'
        },
        {
          title: '会员卡号',
          dataIndex: 'cardNo'
        },
        {
          title: '会员姓名',
          dataIndex: 'nickname'
        },
        {
          title: '完成状态',
          dataIndex: 'dealFlag'
        },
        {
          title: '完成时间',
          dataIndex: 'dealDate'
        }
      ],
      ifVip: '',
      taskId: '',
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      vipBackId: '',
      backInfoBox: false,
      feedBackMess: [],
      media: {},
      taskTypeBox:0,
    }
  },
  created() {
    this.taskId = this.$route.query.id
    console.log('taskId   ', this.taskId)
    this.getData()
    this.getMediaInfo()
  },
  mounted() {
    this.getVip()
  },
  methods: {
    bigImg(item) {
      let a=window.open('')
       a.document.write(`<!DOCTYPE html><html><body ><div style="display: flex;justify-content: center;align-items: center"><img style="width:800px;height:800px" src='${item}'/></div></body></html>`)
    },
  bigVideo(item){
      console.log('item  ', item)
      window.open(item)
  },
    onPageChange(page, pageSize) {
      this.pagination.pageNo = page
      this.getVip()
    },
    onSizeChange(current, pageSize) {
      this.pagination.pageNo = 1
      this.pagination.pageSize = pageSize
      this.getVip()
    },
    openFeedback() {
      this.backInfoBox = true
    },
    cancel() {
      console.log('取消')
    },
    goback() {
      window.history.back()
    },
    // 查看任务详情数据
    getData() {
      let taskId = {
        taskAllocateId: this.taskId
      }
      getTaskMinute(taskId, res => {
        console.log('getTaskMinute    ', res)
        this.taskMess = res.data
        this.ifVip = res.data.guideType
        this.taskTypeBox = res.data.taskType
        let feedbackType = res.data.feedbackType
        if (feedbackType === 0) {
          if (this.taskMess.feedbackPict) {
            this.taskMess.feedbackPict = JSON.parse(res.data.feedbackPict)
          }
        }
        console.log('this.tasktype', this.taskTypeBox)
      })
    },
    //获取目标会员table数据
    async getVip() {
      let params = {
        taskAllocateId: Number(this.taskId),
        pageNumber: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      }
      await getTaskCust(params, res => {
        console.log('getTaskCust  ', res)
        res.data.records.forEach(item => {
          if (item.dealFlag === 1) {
            item.dealFlag = '已完成'
          } else {
            item.dealFlag = '未完成'
          }
        })
        if (res.data.records.length != 0) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
          this.aimVip = true
        }
        // this.dataSource = res.data.records
        // this.total = res.data.total
        // this.vipBackId = res.data.records[0].id
        // console.log(this.vipBackId);
      })
      // if(this.taskType===10||this.taskType==11||this.taskType===12){
      //  await getTaskCustBox(params, res => {
      //     console.log("getTaskCustBox  ",res);
      // res.data.records.forEach(item => {
      //   if (item.dealFlag === 1) {
      //     item.dealFlag = '已完成'
      //   } else {
      //     item.dealFlag = '未完成'
      //   }
      // })
      // if(res.data.records.length!=0){
      // this.dataSource = res.data
      //  this.pagination.total = res.data.total
      // this.aimVip=true
      // }
      // this.dataSource = res.data.records
      // this.total = res.data.total
      // this.vipBackId = res.data.records[0].id
      // console.log(this.vipBackId);
      // })
      // }else{
      //     await getTaskCust(params, res => {
      //   console.log("getTaskCust  ",res);
      //   res.data.records.forEach(item => {
      //     if (item.dealFlag === 1) {
      //       item.dealFlag = '已完成'
      //     } else {
      //       item.dealFlag = '未完成'
      //     }
      //   })
      //   if(res.data.records.length!=0){
      //   this.dataSource = res.data.records
      //    this.pagination.total = res.data.total
      //   this.aimVip=true
      //   }
      //   // this.dataSource = res.data.records
      //   // this.total = res.data.total
      //   // this.vipBackId = res.data.records[0].id
      //   // console.log(this.vipBackId);
      // })
      // }
    },
    onChange(page, pageSize) {
      this.pageNumber = page
      this.pageSize = pageSize
      this.getVip()
    },
    //目标会员table中的反馈按钮
    feedBack(id) {
      console.log(id)
      this.backInfoBox = true
      getVipFeedback(
        {
          taskAllocateCustId: id
        },
        res => {
          console.log(res)
          this.feedBackMess = res.data
          if (this.feedBackMess.feedbackPict) {
            this.feedBackMess.feedbackPict = JSON.parse(res.data.feedbackPict)
            console.log(this.feedBackMess.feedbackPict)
          }
        }
      )
    },
    handleOk() {
      this.backInfoBox = false
    },
    getMediaInfo() {
      getAllocateMediaInfo({ taskAllocateId: this.taskId }, res => {
        console.log('media', res)
        this.media = res.data
        if (res.data.mediaType == '-1') {
          this.media.typeName = '无'
          this.media.mediaContent = '无'
        }

        if (res.data.urlPic) {
          this.media.urlPic = JSON.parse(res.data.urlPic)
          console.log('urlPic',this.media.urlPic);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}
.assignmentTable {
  margin-top: 20px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
.label-item {
  .ant-form-item-label {
    label {
      width: 70px;
      text-align: center;
    }
  }
}

.mess {
  margin-bottom: 10px;
  display: flex;
  text-align: right;
}

.mess-label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.ant-table-wrapper {
  margin-top: 0;
}
.searchStyle {
  width: 200px;
  margin-right: 10px;
}
.feedImg {
  margin-top: 10px;
  display: flex;
  width: 350px;
}
/deep/.ant-image {
  margin: 0 5px 5px 0;
  width: 120px;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
  }
}
.pageData {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-top: 10px;
}
.all span {
  line-height: 32px;
}
</style>
